但是本文传达的意思和table
无关,嘻嘻.....
要求:选择#table1下的两个子元素tr
<table id="table1">
<tr>
<td>
<table id="table2">
<tr>行行1</tr>
<tr>行行2</tr>
</table>
</td>
</tr>
<tr>行2</tr>
</table>
第一次测试:document.querySelector("#table1 tr")
,测试发现只能选择一个tr,不符合要求;
第二次测试:document.querySelectorAll("#table1 tr")
,测试选择出四个tr,不符合要求,这是由于里面包含一个table导致。执行document.querySelectorAll("#table1 tbody")
,里面有两个tbody(为什么里面会有tbody,自行谷歌关键词thead,tbody,tfoot
);
第三次测试:document.querySelectorAll("#table1>tbody>tr")
结果符合要求;
综上所述,那么问题来了。querySelector()
通过CSS的选择器只能选单一的元素(即使里面的选择器是*,也无法选择多个元素),选多个元素需要用querySelectorAll()
,这个和Jqery
是不一样的,不要混淆。#table1>tbody
里面>
号可以筛选以#table1为父级的子元素,不加这个则返回内部所有,所以要熟记CSS选择器
啊。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。